
<template>
  <div class="form-design-setting-container">
    <el-form size="" label-width="100px" label-position="left">
      <el-tabs v-model="tabs1">
        <el-tab-pane label="题目设置" name="1">
          <el-form-item label="是否必填">
            <el-checkbox v-model="formComponent.require" label="必填" />
          </el-form-item>
          <el-form-item label="提示" v-if="formComponent.writerPlaceholderType == 1">
            <el-input v-model="formComponent.writerPlaceholder" placeholder="请输入填写区提示"></el-input>
          </el-form-item>
          <el-form-item label="宽度设置">
            <el-select v-model="formComponent.width" placeholder="请选择">
              <el-option v-for="item in designOptions.widthOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-tabs v-model="tabs2">
        <el-tab-pane label="填写设置" name="1">
          <el-form-item label="选择范围">
            <el-select v-model="formComponent.district" placeholder="请选择">
              <el-option v-for="item in designOptions.districtLevelOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { designOptions } from "@/views/form/manage/design/config/formCmpConfig.js";
const props = defineProps({
  formComponent: {
    type: Object,
  },
})
const tabs1 = ref('1')
const tabs2 = ref('1')
const formComponent = computed(() => { return props.formComponent })
</script>

<style lang="scss" scoped></style>
